import {
  ExpansionPanel,
  ExpansionPanelDetails,
  ExpansionPanelSummary
} from "@material-ui/core";
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import { Col, Radio, Row } from "antd";
import * as React from "react";
import { Depart } from "../../type/CommonData";

const styles = (theme: Theme) =>
  createStyles({
    root: {
      boxShadow: "none",
      backgroundColor: "#fafafa"
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  data: Depart[];
  changeDepart: (value: string) => void;
}
const radioCss: React.CSSProperties = {
  border: "0px",
  fontSize: "14px",
  marginBottom: "5px",
  backgroundColor: "#fafafa"
};
const DepartRadioList = ({ data }: { data: Depart[] }) => {
  return (
    <Row style={{ width: "100%" }}>
      {data.map((value, index, array) => {
        return (
          <Col span={4} key={value.id}>
            <Radio.Button style={radioCss} key={value.id} value={value.id}>
              {value.name}
              {value.headcount ? `(${value.headcount}人)` : ""}
            </Radio.Button>
          </Col>
        );
      })}
    </Row>
  );
};

class DepartmentList extends React.Component<Iprops> {
  public render() {
    const { classes } = this.props;
    return (
      <Radio.Group
        onChange={e => {
          this.props.changeDepart(e.target.value);
        }}
        style={{ width: "100%" }}
      >
        <ExpansionPanel classes={{ root: classes.root }}>
          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
            <DepartRadioList
              data={
                this.props.data.length > 6
                  ? this.props.data.slice(0, 6)
                  : this.props.data
              }
            />
          </ExpansionPanelSummary>
          <ExpansionPanelDetails>
            <DepartRadioList
              data={this.props.data.length > 6 ? this.props.data.slice(6) : []}
            />
          </ExpansionPanelDetails>
        </ExpansionPanel>
      </Radio.Group>
    );
  }
}

export default withStyles(styles)(DepartmentList);
